import React, { lazy } from "react";
import { Switch, Route } from "react-router-dom";
import NotFound from "../pages/NotFound";

const Index = lazy(() => import(
	/* webpackChunkName: "index" */
    /* webpackMode: "lazy" */
    "../pages/index/Index"
));
const Product = lazy(() => import(
	/* webpackChunkName: "product" */
	/* webpackMode: "lazy" */
	"../pages/product/Product"
));
const ProductList = lazy(() => import(
	/* webpackChunkName: "product" */
	/* webpackMode: "lazy" */
	"../pages/product/list/List"
));
const ProductDetail = lazy(() => import(
	/* webpackChunkName: "product" */
	/* webpackMode: "lazy" */
	"../pages/product/detail/Detail"
));

export const routes =[
	{
		path: "/",
		exact: true,
		component: Index,
		key: "Index"
	},
	{
		path: "/product",
		component: Product,
		key: "Product",
		routes: [
			{
				path: "/product/list",
				key: "ProductList",
				component: ProductList
			},
			{
				path: "/product/detail",
				key: "ProductDetail",
				component: ProductDetail
			}
		]
	}
];

export function renderRoutes(routes, extraProps = {}, switchProps = {}) {
	return routes ? (
		<Switch {...switchProps}>
			{routes.map((route, i) => (
				<Route
					key={route.key || i}
					path={route.path}
					exact={route.exact}
					render={props =>
						route.render ? (
							route.render({ ...props, ...extraProps, routes: route.routes })
						) : (
							<route.component {...props} {...extraProps} routes={route.routes} />
						)
					}
				/>
			))}
			<Route component={NotFound} />
		</Switch>
	) : null;
}
